import React from 'react';
import {Route , Link} from 'react-router-dom';
import Vue  from './Vue'
import Fultter  from './Fultter'
import ReactPage  from './ReactPage'

function Index (){
    return(
        <div>
            <div className="topNav">
                <ul style={{display:'flex'}}>
                    <li style={{marginRight:'10px'}}><Link to="/video/reactPage">React教程</Link></li>
                    <li><Link to="/video/vue">VUE教程</Link></li>
                    <li><Link to="/video/fultter">Fultter教程</Link></li>
                    
                </ul>
            </div>
            <div className="videoContent">
                <div><h1>视频教程</h1></div>
                <Route path="/video/reactPage/" component={ReactPage}></Route>
                <Route path="/video/vue/" component={Vue}></Route>
                <Route path="/video/fultter/" component={Fultter}></Route>
            </div>
        </div>
    )
}
export default Index